<template>
  <el-row style="width: 100%" type="flex">
    <el-col>
      {{ treeNode.name }}
    </el-col>
    <el-col :span="6">
      <el-row type="flex" justify="space-between">
        <el-col>
          <span style="margin-right: 20px">{{ treeNode.manager }}</span>
        </el-col>
        <el-col>
          <el-dropdown @command="clickMenuItem">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="add">添加部门</el-dropdown-item>
                <!--如果是头部card组件内部调用会传递isRoot属性为true-->
                <!--编辑和删除只在树组件内部调用(isRoot: false)的时候展示出来-->
                <el-dropdown-item
                  v-if="!isRoot"
                  command="edit"
                  divided
                >编辑部门</el-dropdown-item>
                <el-dropdown-item
                  v-if="!isRoot"
                  command="del"
                  divided
                >删除部门</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { delDepartApi } from '@/api/departments'

export default {
  name: 'TreeTool',
  props: {
    // 接收父组件传递过来的节点数据
    // 当前的行数据
    treeNode: {
      type: Object,
      required: true
    },
    isRoot: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // type属性为子菜单项的command属性的值
    async clickMenuItem(type) { // edit
      // 如果不加会怎么样？
      if (type === 'del') {
        // 删除之前进行提示，确认以后再删除
        // 需要把当前项的id传递过去
        // 进行一个弹层的提示，用户点击确认以后再去删除当前数据
        await this.$confirm('是否确认删除？')
        await delDepartApi(this.treeNode.id)
        //   删除成功了，进行删除成功的提示
        this.$message.success('删除成功')
        //   更新部门数据
        this.$emit('getDeparts')
        //   删除的操作
        //   console.log('删除按钮')
        //   调用删除的接口，删除当前点击的数据
        //   console.log(this.treeNode) // 当前的行数据
      } else if (type === 'add') {
        console.log('展示新增的弹层')
        // 修改父组件的showDialog标识为true
        // 同时把当前点击的部门信息对象传递过去
        this.$emit('addDept', this.treeNode)
      } else if (type === 'edit') {
        // 点击了的是编辑按钮
        // 让父组件展示弹层
        this.$emit('editDept', this.treeNode)
      }
    }
  }
}
</script>

<style scoped>

</style>
